<template>
  <view class="content">
    <view class="top-bg">
      <view class="t-b text-white text-bold text-xxxl">{{
        titleRef.title
      }}</view>
      <view class="t-b2 margin-top-xs text-white">{{ titleRef.subTitle }}</view>
    </view>

    <view class="input-group">
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <wd-input
            label="账号"
            label-width="100px"
            prop="account"
            clearable
            prefix-icon="user"
            v-model="model.account"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写账号' }]"
          />
          <wd-input
            label="密码"
            label-width="100px"
            prop="password"
            prefix-icon="lock-on"
            show-password
            clearable
            v-model="model.password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </wd-cell-group>
        <view class="footer">
          <wd-button type="primary" class="submitfooter"size="medium" @click="handleSubmit" block
            >提交</wd-button
          >
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getPublicKey, loginApi } from "@/apis/login";
import { ref, reactive } from "vue";
import { useToast } from "wot-design-uni";
import JSEncrypt from "jsencrypt";
import { useUserStore } from "@/stores/user";
import config from '@/common/config'

const user = useUserStore();
const value = ref<string>("");
const titleRef = ref({
  title: "欣奕华数字化看板",
  subTitle: "欢迎使用，请先登录",
});
const model = reactive<{
  account: string;
  password: string;
}>({
  account: "123456789",
  password: "Aa1234567",
});
const form = ref();

async function handleSubmit() {
  //  Storage.setCache("token", '12345');
  const { valid, errors } = await form.value.validate();
  if (valid) {
    // const publicKey = await getPublicKey();
    const encryptKey = rsaEncryptData(model.password);
    user.loginFun({
      username: model.account,
      password: encryptKey,
      grantType: "password",
      clientId: "jceClient",
      mode: "none", //不要默认的错误提示
    });
  }
}

// 对密码进行加密
const rsaEncryptData = (text: string) => {
  const encrypt = new JSEncrypt();
  encrypt.setPublicKey(config.publicKey);
  return encrypt.encrypt(text) as string;
};
</script>

<style lang="scss">
.content {
  height: 100vh;
  background-color: #fff;

  .top-bg {
    width: 750rpx;
    background-image: url(@/assets/head-bg.png);
    height: 480rpx;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 170rpx;
  }

  .t-b {
    font-size: 60upx;
    color: #000;
    font-weight: bold;
  }
  .t-b2 {
    font-size: 32upx;
    color: #000;
    padding: 25upx 0 0 0;
  }

  .input-group {
    width: 100%;
  }

  .footer {
    margin-top: 20px;

    .submitfooter {
      width: 80vw;
    }
  }
}
</style>
